<template>
  <div class="App">
    <h1>Count子组件</h1> 
    <button @click="count++">累加{{count}}</button>
    <button @click="$destroy()">卸载自己</button>
  </div>
</template>
<script>
export default {
  name: 'Count',
  data() {
    return {
     count: 10
    }
  },
  beforeCreate() {
    console.log('***beforeCreate');
  },
  created() {
    console.log('****created',"注入完所有的配置，可以拿到数据了");
  },
  beforeMount() {
      console.log('***beforeMount')
  },
  mounted() {
    console.log('****mounted',"DOM加载完毕，可以添加事件，还有定时器功能")
  },
  beforeUpdate() {
    console.log('****beforeUpdate', "页面更新渲染前，此时页面显示数据和实际数据不一致");
  },
  updated() {
    console.log("****updated", "页面渲染完毕")
  },
  beforeDestroy() {
    console.log("****beforeDestroy")
  },
  destroyed() {
    console.log("*****destroyed")
  }
}
</script>
<style scoped>
  
</style>